<template>
	<div ref="el" class="flex-1 flex flex-col">
		<div class="mt-2 mb-[10px] flex justify-between items-center">
			<my-bets-tabs v-model="tab" :unsettled-num="resData?.unSettledTotal" />
		</div>
		<base-list-plus
			class="flex-1"
			:loading="loadingUnsettlement"
			:isFinish="isFinish"
			:isEmpty="unsettlementList.length === 0"
			@load="search">
			<base-waterfall :data="unsettlementList" :column="cols" :picturePreReading="false">
				<template v-slot="{ item, width }">
					<CasinoCard type="slots" :data="item" :style="[width]">
						<template #slot>
							<div class="flex items-center justify-between" v-if="item.games">
								<div class="label">{{ $t('report.games') }}</div>
								<div class="value">{{ item.games }}</div>
							</div>
							<div class="mt-[2px] flex items-center justify-between" v-if="item.spins">
								<div class="label">{{ $t('report.spins') }}</div>
								<div class="value">{{ fmtNum(item.spins) }}</div>
							</div>
						</template>
					</CasinoCard>
				</template>
			</base-waterfall>
		</base-list-plus>
	</div>
</template>

<script lang="ts" setup>
import { ref, watch, computed } from 'vue'
import { SlotsMyBetsTab } from './types'
import { getSlotsRecordList } from '@/api/slots'
import { useListCols, useRequest } from '@/hooks'
import MyBetsTabs from './my-bets-tabs.vue'
import { setItem, getItem } from '@/utils'
import { fmtNum } from '@/utils'
import { BaseWaterfall, BaseListPlus } from '@/components/base'
import CasinoCard from '@/components/betting/casino-card/index.vue'
import { SLOTS_MY_BETS_TAB } from '@/constants'

const tab = ref(getItem(SLOTS_MY_BETS_TAB) || SlotsMyBetsTab.unsettled)

const el = ref(null)

const { cols } = useListCols(el)

const {
	run: runUnsettlement,
	loading: loadingUnsettlement,
	list: unsettlementList,
	data: resData
} = useRequest<any>(getSlotsRecordList, {
	pageSize: 24
})

const isFinish = computed(() => {
	if (tab.value === SlotsMyBetsTab.unsettled) {
		if (unsettlementList.value.length === resData.value?.unSettledTotal) {
			return true
		}
		return false
	}
	if (tab.value === SlotsMyBetsTab.all) {
		if (unsettlementList.value.length === resData.value?.allTotal) {
			return true
		}
		return false
	}
	if (tab.value === SlotsMyBetsTab.settled) {
		if (unsettlementList.value.length === resData.value?.settledTotal) {
			return true
		}
		return false
	}
	return false
})

const search = (refresh = false) => {
	runUnsettlement(
		{
			betOrderState: tab.value === -1 ? 0 : tab.value
		},
		{ refresh }
	)
}

watch(tab, (val) => {
	setItem(SLOTS_MY_BETS_TAB, val)
	search(true)
})

const init = () => {
	runUnsettlement(
		{
			betOrderState: tab.value
		},
		{ refresh: true }
	)
	search(true)
}

init()
</script>
